<script setup lang="ts">
import PC from "./Pc.vue";
import Mobile from "./Mobile.vue";

// 导航栏
const navList = [
  { name: "产品" },
  // {
  //   name: "商用产品及方案",
  //   menus: [{ name: "商用环境" }, { name: "政企环境" }, { name: "成为经销商" }],
  // },
  {
    name: "探索",
    menus: [
      {
        name: "神眸品牌",
        href: "/about",
      },
      // { name: "神眸看中国" },
      // { name: "神眸社区" },
      // { name: "购买渠道" },
      // { name: "联系我们" },
    ],
  },
  {
    name: "服务",
    menus: [
      // { name: "热门服务" },
      {
        name: "下载中心",
        href: "/support",
      },
      // { name: "产品支持" },
    ],
  },
];

import img from "@/assets/images/product-img.png";
import { categoryList } from "~/mock/products";

// 商品列表
const products = new Array(9).fill({
  title: "神眸BC6+ 移动摄像机移动摄像机移动摄像机",
  desc: "6轴防抖｜100g超轻｜60小时长续航｜4G终身免流6轴防抖｜100g超轻｜60小时长续航｜4G终身免流",
  img,
});
</script>

<template>
  <DeviceRender>
    <PC
      :nav-list="navList"
      :category-list="categoryList"
      :products="products"
    />

    <template #mobile>
      <Mobile
        :nav-list="navList"
        :category-list="categoryList"
        :products="products"
      />
    </template>
  </DeviceRender>
</template>

<style lang="less">
.page-header {
  position: fixed;
  top: 0;
  z-index: 20;
  width: 100%;
  height: var(--pc-header-height);
  background: rgba(25, 25, 25, 0.8);

  &-container {
    --pc-header-height: 54px;
  }
}
</style>
